<template>
  <el-dialog
    v-model="open" title="长租退订" width="800px" append-to-body :close-on-click-modal="false"
    @close="cancel"
  >
    <el-form ref="longRentQueryRef" :model="form" :rules="queryRules" label-width="150px">
      <el-form-item v-if="fa" label="长租起末日期">
        {{ fa.longOrderPeriod.replace(/,/g, '-') }}
      </el-form-item>

      <el-form-item v-if="fa" label="长租时间段">
        {{ fa.longOrderTimeRange.replace(/,/g, '-') }}
      </el-form-item>
      <el-form-item v-if="fa" label="长租周期">
        每周{{ fa.longOrderDay }}
      </el-form-item>
      <el-form-item v-if="fa" label="支付金额">
        {{ fa.finalOrderAmount }}
      </el-form-item>

      <el-form-item label="选择退订起始日期" prop="cancalDateStr">
        <el-date-picker
          v-model="form.cancalDateStr"
          type="date" value-format="YYYY-MM-DD"
          placeholder="选择退订起始日期"
          :size="size"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="getMoney">获取可退金额</el-button>
      </el-form-item>
      <el-form-item label="可退金额">
        <span class="cRed">￥{{ form.canrefundAmount }}</span>
      </el-form-item>
    </el-form>

    <el-form ref="longRentRef" :model="form" :rules="rules" label-width="150px">
      <el-form-item label="实退金额" prop="refundAmount">
        <el-input v-model="form.refundAmount" type="number" />
      </el-form-item>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { getCurrentInstance, reactive } from '@vue/runtime-core'
import useVenStore from '../../../../../../store/modules/ven'
import { toRefs } from '@vueuse/shared'
import { computed } from '@vue/reactivity'
import { getFatherLongRentOrder, generateLongRentRefund, cancelLongRent } from '../../../../../../api/ven/reserve'
import { watch } from 'vue'
import { dayjs } from 'element-plus'


const venStore = useVenStore()
const { proxy } = getCurrentInstance()

const emit = defineEmits(['update:modelValue', 'submitForm'])

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  data: Object
})

const formBase = {
  canrefundAmount: '0'
}
const data = reactive({
  queryRules: {
    cancalDateStr: { required: true, message: '必填' }
  },
  form: {
    ...formBase
  },
  rules: {
    refundAmount: { required: true, message: '必填' }
  },
  fa: ''
})
const { queryRules, form, rules, fa } = toRefs(data)

const open = computed({
  get: () => props.modelValue,
  set: () => {}
})
watch(open, val => {
  if (val) {
    form.value = { ...formBase }
    getFatherLongRentOrder(props.data.id).then(res => {
      fa.value = res.data
      form.value.orderId = fa.value.id
    })
  } else {
    proxy.resetForm('longRentQueryRef')
    proxy.resetForm('longRentRef')
  }
})

function getMoney() {
  console.log(form.value)
  proxy.$refs['longRentQueryRef'].validate((valid) => {
    if (valid) {
      generateLongRentRefund({
        cancalDateStr: form.value.cancalDateStr,
        orderId: fa.value.id
      }).then((res) => {
        form.value.canrefundAmount = res.data
      })
    }
  })
}


function submitForm() {
  proxy.$refs['longRentRef'].validate(valid => {
    if (valid) {
      cancelLongRent(form.value).then((res) => {
        console.log(res)
        proxy.$modal.msgSuccess('操作成功')
        emit('update:modelValue', false)
        emit('submitForm')
      })
    }
  })
}

function cancel() {
  emit('update:modelValue', false)
}


</script>

<style scoped></style>
